<!DOCTYPE html>
<html lang="en">
<head>
    <title>智能文件上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/easyui/themes/default/easyui.css">
    <link href="static/easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <link href="static/easyui/demo/demo.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/js/main.js"></script>
</head>
<body style="height: 100%">
<div class="container">
    <div class="content">
        <div class="easyui-panel" style="padding:5px">
            <div style="margin-bottom:20px">
                <input id="fb" type="text" style="width:300px">
            </div>

<!--            <form id="ff">-->
<!--                <div style="margin-bottom:20px">-->
<!--                    <input style="" class="easyui-radiobutton" name="fruit" value="Apple">基于整个文件系统分类-->
<!--                    <input style="margin-bottom:20px" class="easyui-radiobutton" name="fruit" value="Orange">基于上传文件分类-->
<!--                </div>-->
<!--            </form>-->

            <div style="margin-bottom:20px">
                <a href="javascript:autoClassify() " id="" class="easyui-linkbutton">自动分类</a>
                <a href="javascript:submitForm();" class="easyui-linkbutton save-btn">提交</a>
            </div>
            <div id="p" class="easyui-progressbar" style="width:400px;"></div>
<!--            <table id="dg"></table>-->
            <div class="easyui-panel" style="width:400px;height:250px">
                <ul id="folder-tree"></ul>
                <!-- 右键显示 -->
                <div id="mm1" class="easyui-menu" style="width:120px;">
                    <div onclick="append()" data-options="iconCls:'icon-add'">创建文件夹</div>
                    <div onclick="removeFolder()" data-options="iconCls:'icon-remove'">移除文件夹</div>
                </div>
                <div id="mm2" class="easyui-menu" style="width:120px;">
                    <div onclick="removeFile()" data-options="iconCls:'icon-remove'">删除</div>
                    <div onclick="removeFile()" data-options="iconCls:'icon-remove'">移动</div>
                </div>
            </div>

            <br/>
            <a href="javascript:batchRemove()" class="easyui-linkbutton">移动</a>
            <div class="easyui-datalist" title="未分类的文件列表" style="width:400px;height:250px" data-options="
            url: 'json/unclassify_data.json',
            method: 'get',
            checkbox: true,
            selectOnCheck: false,
            onBeforeSelect: function(){return false;}
            ">
            </div>

        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#fb').filebox({
            buttonText: '选择文件',
            buttonAlign: 'left'
        })
    })

    function autoClassify() {
        var value = $('#p').progressbar('getValue');
        if (value < 100) {
            value += Math.floor(Math.random() * 20);
            $('#p').progressbar('setValue', value);
            setTimeout(arguments.callee, 200);
        } else {
            $("#dg").datagrid({
                title: "资料列表",
                method: "get",
                url: 'json/data_list.json',
                striped: true,
                pagination: true,
                pageNumber: 1,
                pageList: [2, 5, 10, 20, 30],
                rownumbers: true,
                pagePosition: "bottom",
                columns: [[
                    {field: "order", title: '序号', width: 100},
                    {field: "filename", title: '文件名', width: 100},
                    {field: "updateTime", title: '上传时间', width: 150},
                    {field: "updateUser", title: '上传用户', width: 100},
                    {field: "filePath", title: '所在文件夹', width: 200},
                    {field: "fileSize", title: '文件大小', width: 100},
                    {field:"option", title: '操作',width:150,
                        formatter: function(value,rowData,index){
                            return "<a href='javascript:void(0)' onclick='moveFile("+rowData.id+")'>移动  </a>"
                        }
                    }
                ]],
                loadFilter: function (data) {
                    var pager = $('#dg').datagrid('getPager'); // 获取分页器对象
                    var options = pager.pagination('options'); // 获取分页器的选项
                    // 注意：以下代码是客户端分页的示例，但通常不推荐这样做，因为性能问题
                    var start = (options.pageNumber) * options.pageSize;
                    var rows = data.slice(start, start + options.pageSize);
                    return {total: data.length, rows: rows};

                }
            });
            $("#folder-tree").tree({
                url: "json/sidebar.json",
                method: "get",
                animate: true,
                onContextMenu: function (e, node) {
                    e.preventDefault();
                    $(this).tree('select', node.target);
                    if ("children" in node) {
                        $('#mm1').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        });
                    } else {
                        $('#mm2').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        });
                    }

                }
            })
            $.messager.alert("提示", "分类完成，请仔细核对每个文件是否在合适的文件夹");
        }
    }

    function submitForm() {
        $.messager.alert("提示", "上传成功");

    }

    function moveFile() {
        $.messager.alert("提示", "移动成功");
    }

</script>
</body>
</html>